"use client";
import type {MouseEvent, ReactNode} from "react";

import React, {useEffect} from "react";
import {useRouter} from "next/navigation";

import PinsPage from "../../../../pins/[id]/page";
import {ArrowLeftOutlined, CloseOutlined} from "@/components/icons";

type BackButtonProps = {
    title?: string;
    icon?: ReactNode,
    position?: 'left' | 'right';
    onClick?: (event: MouseEvent<HTMLElement>) => void;
}
const BackButton = function (props: Readonly<BackButtonProps>) {
    const {title, icon, position = 'left', onClick} = props;

    return (
        <a className={`flex text-slate-400 hover:text-slate-600 cursor-pointer gap-2.5 absolute top-5 ${position === 'left' ? 'start-5' : 'end-9'} transition-colors`}
           onClick={onClick}>
            {icon}
            {title && <span className={"font-semibold text-sm"}>{title}</span>}
        </a>
    )
}


const PinsModalPage = () => {
    const router = useRouter();

    useEffect(() => {
        // 在组件挂载时设置body的overflow属性为hidden
        document.body.style.overflow = 'hidden';
        // 在组件卸载时恢复body的overflow属性为auto
        return () => {
            document.body.style.overflow = '';
        };
    }, []);

    function handleClosureModal(event: MouseEvent<HTMLElement>) {
        event.preventDefault();
        router.back()
    }

    return (
        <div className={"relative"}>
            <div className={"fixed inset-0 h-full bg-zinc-100/95 backdrop-blur-[4px] z-[9999]"}></div>
            <div className={"fixed top-0 left-0 right-0 h-0 z-[9999]"}>
                {/*底板蒙版*/}
                <div className={"absolute indent-0 w-full h-full min-h-lvh cursor-zoom-in"}
                     onClick={handleClosureModal}/>
                {/*左侧回退按钮*/}
                <BackButton icon={<ArrowLeftOutlined/>} title={'返回'} onClick={handleClosureModal}/>
                {/*右侧关闭按钮*/}
                <BackButton icon={<CloseOutlined/>} position={"right"} onClick={handleClosureModal}/>
            </div>
            <div className={"fixed overflow-y-scroll inset-0 z-[9999] pointer-events-none"}>
                <div className={"relative h-full z-10 pointer-events-none"}>
                    <div>
                        <PinsPage isModal={true}/>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default PinsModalPage;